/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20240309
* @version:0.4.0
* @type:interface
* @description:
* # Step
* The Step component visualizes the progress of a sequence by breaking it down into individual steps. It allows for custom theming and supports indicating the current, completed, and pending steps through visual cues.
* ## Properties
* - in property <Themes> theme : The theme setting for the step component, defaulting to Dark.
* - in-out property <length> font-size : The font size used for step labels.
* - in-out property <int> font-weight : The font weight for step labels.
* - in-out property <bool> font-italic : Specifies whether the font for step labels is italic.
* - in-out property <string> font-family : The font family for step labels.
* - in-out property <brush> font-color : The color of the font used for step labels.
* - in-out property <int> active : The index of the currently active step.
* - in property <brush> active-color : The color indicating an active step.
* - in property <brush> done-color : The color indicating a completed step.
* - in property <brush> undone-color : The color indicating a pending step.
* - in property <[SStepOption]> options : An array of step options defining the sequence of steps.
* ## Functions
* - public function next() : Advances the active step by one, unless it's the last step.
* - public function clear() : Resets the active step to the first step.
* - public function done() : Marks all steps as completed by setting the active step beyond the last step.
* - pure public function get-active() -> int : Returns the index of the currently active step.
* - pure function count-align(index:int) -> LayoutAlignment : Determines the alignment of a step based on its index in the sequence.
* - pure function status-color(index:int) -> brush : Returns the color that should be used for a step at the given index based on its status (active, done, or undone).
* ============================================
*/
import { ROOT_STYLES } from "../../themes/index.slint";
import { SText } from "../text/index.slint";
import { SCard } from "../card/index.slint";
import { Themes,SStepOption } from "../../use/index.slint";
import { SDivider } from "../divider/index.slint";

export component Step{
    width: 100%;
    in property <Themes> theme : Themes.Dark;
    in-out property <length> font-size;
    in-out property <int> font-weight;
    in-out property <bool> font-italic;
    in-out property <string> font-family;
    in-out property <brush> font-color;
    in-out property <int> active: 1;
    in property <brush> active-color: ROOT-STYLES.sur-theme-colors.primary.normal;
    in property <brush> done-color: ROOT-STYLES.sur-theme-colors.success.normal;
    in property <brush> undone-color: ROOT-STYLES.sur-theme-colors.dark.normal;
    private property <int> inner-active <=> active;
    in property <[SStepOption]> options : [];
    pure function count-align(index:int) -> LayoutAlignment{
       if index==0{
          return LayoutAlignment.start;
       }else if index == root.options.length - 1{
         return LayoutAlignment.end;
       }else{
         return LayoutAlignment.center;
       }
    }
    public function next() {
      if root.inner-active != root.options.length + 1{
        root.inner-active += 1;
      }
    }
    public function clear() {
      root.inner-active = 1;
    }
    public function done(){
      root.inner-active = root.options.length + 1;
    }
    pure public function get-active() -> int{
      return root.active;
    }
    pure function status-color(index:int) -> brush {
        if inner-active == index + 1{
          return root.active-color;
        }else if inner-active > index + 1{
          return root.done-color;
        }else{
          return root.undone-color;
        }
    }
    
    VerticalLayout {
      z: 111;
      alignment: space-between;
      step-layout:= HorizontalLayout {
        alignment: space-between;
        padding-bottom: 8px;
        padding-top: 8px;
        for item[index] in root.options: step-item-wrap:= Rectangle {
          height: item-step.height;
          width: parent.width / options.length - 12px;
          VerticalLayout {
            width: parent.width;
            spacing: 6px;
            HorizontalLayout {
              alignment: center;
              height: item-step.height;
              item-step:= SCard{
                theme: root.theme;
                height: 30px;
                width: 30px;
                border-radius: self.height / 2;
                border-color: status-color(index);
                background: status-color(index);
                SText {
                  theme: root.theme;
                  text: index + 1;
                  font-weight: 700;
                  font-family: root.font-family;
                  font-size: 16px;
                }
              }
            }
          }
        } 
      }
      HorizontalLayout {
        for item[index] in root.options: details-wrap:=Rectangle {
          VerticalLayout {
            spacing: 4px;
            item-title:= SText{
              theme: root.theme;
              text: item.label;
              font-weight: 700;
              font-size: root.font-size;
              font-family: root.font-family;
              font-italic: root.font-italic;
              horizontal-alignment: center;
              color: status-color(index);
            }
            item-info:= SText{
              text: item.info;
              font-weight: 500;
              font-family: root.font-family;
              font-size: root.font-size - 3px;
              theme: root.theme;
              horizontal-alignment: center;
              color: status-color(index);
            }
          }
        }
      }
    }
    if options.length != 0: HorizontalLayout{
    
      for item[index] in options.length - 1: HorizontalLayout{
        alignment: center;
        width: step-layout.width / options.length;
        Rectangle {
          SDivider {
            z: 11;
            x: 0;
            y: step-layout.height / 2 - self.height / 2;
            theme: root.theme;
            width: step-layout.width / options.length;
            background: status-color(index);
          }
        }
      }
    }
}